<template>
	<!-- Skeleton 骨架屏 -->
	<van-skeleton title avatar :row="12" :loading="loading">
		<!--如果isFixed为true的话，就添加class is_fixed 设置固定定位-->
		<!-- <div id="boxFixed" :class="{'is_fixed' : isFixed}">
			这个是要滚动到顶部吸附的元素
		</div> -->
		<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
		<van-nav-bar class="nav-bar" :title="shop.shopName" left-text="返回" left-arrow @click-left="onClickLeft" />
		<!-- 侧边导航 -->
		<!-- <van-sidebar v-model="active">
			<van-sidebar-item title="标签名称" />
			<van-sidebar-item title="标签名称" />
			<van-sidebar-item title="标签名称" />
		</van-sidebar> -->
		<div class="search-fixed" style="width:100%">

			<van-search @search="onSearch" v-model="dishesName" input-align="center" shape="round" background="#ffd101"
				placeholder="请输入搜索关键词">
				<template #action>
					<div @click="onClickButton()">搜索</div>
				</template>
			</van-search>
		</div>
		<div class="middle-top">

			<div v-for="picture in tu" :key="picture" class="middle-top-one">
				<div class="middle-top-two">
					<van-image fit="cover" :src="picture.url" />
					<span>{{ picture.character }}</span>
				</div>
			</div>
		</div>
		<div class="middle-zhong">
			<van-grid :border="false" :column-num="5">
				<van-grid-item v-for="itme in middle_tu" :key="itme">
					<router-link to="/waimai">
						<van-image :src="itme.url" />
					</router-link>
				</van-grid-item>
			</van-grid>
		</div>
		<div>
			<van-button>天天神券</van-button>
			<van-button>减配送费</van-button>
			<van-button>高分评价</van-button>
			<van-button>优惠折扣</van-button>
		</div>
		<div>
			<!-- <img v-for="img in imageList" v-lazy="img" /> -->
			<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
			<!-- 组件懒加载,将需要懒加载的组件放在 lazy-component 标签中，即可实现组件懒加载。 -->
			<lazy-component>

				<van-card @click="toDishesDetails(item.id,item.shopId)" v-for="(item) in dishesArray" :key="item">
					<template #tags>
						<van-image class="dishes-image" width="150px" height="150px" fit="cover" lazy-load
							:src="item.dishesPhotoOrVideoUrl" alt="缺省图" />
						<br />
						<span title="标题">{{item.title}}</span>
						<span title="销量">月售{{item.sales}}</span><br />
						<span title="折扣"></span>
						<span title="分量">{{item.weight}}</span>
						<span title="口味">{{item.taste}}</span><br />
						<van-tag plain type="danger">40-8</van-tag>
						<van-tag plain type="danger">30-4</van-tag><br />
						<van-tag plain type="danger">{{item.discount}}折|限1份</van-tag>
						<span title="价格">{{item.price}}￥</span>
					</template>
				</van-card>
			</lazy-component>
		</div>
		<!-- 背景图懒加载:和图片懒加载不同，
		背景图懒加载需要使用 v-lazy:background-image，
		值设置为背景图片的地址，需要注意的是必须声明容器高度。 -->
		<!-- <div v-for="img in imageList" v-lazy:background-image="img" /> -->

		<!-- <p>{{this.dishesArray[0].shop.shopName}}</p> -->

		<!-- 		<div class="flexitem" v-for="(item,index) in tabs" :key="item" :class="seeThis==index?'active':''"><a
				href="javascript:void(0)" @click="goAnchor(index)">{{item}}</a></div>

		<div id="anchor1">block1</div>

		<div id="anchor2">block2</div>

		<div id="anchor3">block3</div>
 -->

		<router-view />
		<van-tabbar route>
			<van-tabbar-item replace to="/waimaiindex" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
			<van-tabbar-item replace to="/order" icon="label-o" badge="99+">订单</van-tabbar-item>
			<van-tabbar-item icon="apps-o" @click="xianshi">更多
			</van-tabbar-item>
		</van-tabbar>
		<!-- <van-tabbar route>
			<van-tabbar-item replace to="/waimaiindex" icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
			<van-tabbar-item replace to="/" icon="label-o" badge="99+">订单</van-tabbar-item>
			<van-tabbar-item icon="apps-o">更多</van-tabbar-item>
		</van-tabbar> -->
	</van-skeleton>
</template>
<script>
	// import $ from 'jquery'
	// import qs from 'qs'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Toast
	} from 'vant';
	export default {
		name: "DishesList",
		setup() {
			const loading = ref(true);

			onMounted(() => {
				loading.value = false;
			});

			return {
				loading,
			};
		},
		data() {
			return {
				entity:{
					dishesId:0
				},
				dishesName: '',
				dishesArray: [],
				shop: {
					shopName: '店铺名',
				},
				seeThis: 0,
				tabs: ['tab0', 'tab1', 'tab2'],
				scrollTop: 0,
				page: 1,
				rows: 5,
				currentPage: 1,
				pageSize: 5,
				total: 0,
				count: 0,
				active: false,
				middle_tu: [{
						url: require("../assets/ms.png")
					},
					{
						url: require("../assets/jd.png")
					},
					{
						url: require("../assets/xx.png")
					},
					{
						url: require("../assets/dy.png")
					},
					{
						url: require("../assets/sc.png")
					},
					{
						url: require("../assets/xh.png")
					},
					{
						url: require("../assets/cs.png")
					},
					{
						url: require("../assets/my.png")
					},
					{
						url: require("../assets/cw.png")
					},
					{
						url: require("../assets/yx.png")
					},
					{
						url: require("../assets/sg.png")
					},
					{
						url: require("../assets/xj.png")
					},
					{
						url: require("../assets/lf.png")
					},
					{
						url: require("../assets/pt.png")
					},
				],
				// loading: false,

			}
		},
		mounted() { //挂载之后执行的方法
			this.addFootprint()
			this.getShopDishesList();
			// 监听滚动事件，然后用handleScroll这个方法进行相应的处理
			window.addEventListener('scroll', this.handleScroll)
		},
		methods: {
			addFootprint() {
				// this.$axios.get('/footprint/addFootprint',this.entity)
				// 	.then(res => {
				// 		console.log("data=" + res)
				// 		console.log("添加到足迹");
				// 		// this.entity = res.result.data;
				// 	}).catch(error => {
				// 		console.log("error:" + error)
				// 	})
				
				// this.entity.dishesId = this.$route.query.dishesId;
				this.entity.shopId = this.$route.query.shopId;
				console.log("添加足迹, shopId="+this.entity.shopId+",dishesId="+this.entity.dishesId);
				
				this.$axios.post('/footprint/addFootprint', this.entity)
					.then(res => {
						console.log("res=" + res)
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			onSearch() {
				this.$axios.get('/dishes/page/fuzzy/query/dishesName', {
						params: {
							dishesName: this.dishesName
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.dishesArray = res.result.data;
						this.shop = this.dishesArray[0].shop;
						console.log("shopName=" + this.dishesArray[0].shop.shopName)
					}).catch(error => {
						console.log("error:" + error)
					})

			},
			handleScroll() {
				console.log("屏幕滚动");
				// $('selector').scrollTop(100);
				//				var anchorOffset0 = this.$el.querySelector('#anchor0').offsetTop - 100
				//				var anchorOffset1 = this.$el.querySelector('#anchor1').offsetTop - 100
				//				var anchorOffset2 = this.$el.querySelector('#anchor2').offsetTop - 100
				//				if (this.scrollTop > anchorOffset0 && this.scrollTop < anchorOffset1) {
				//					this.seeThis = 0
				//				}
				//				if (this.scrollTop > anchorOffset1 && this.scrollTop < anchorOffset2) {
				//					this.seeThis = 1
				//				}
				//				if (this.scrollTop > anchorOffset2) {
				//					this.seeThis = 2
				//				}
			},
			goAnchor(index) { // 也可以用scrollIntoView方法， 但由于这里头部设置了固定定位，所以用了这种方法
				// document.querySelector('#anchor'+index).scrollIntoView() 
				console.log("goAnchor(index)");
				this.seeThis = index;
				var anchor = this.$el.querySelector('#anchor' + index)
				console.log("anchor");
				document.body.scrollTop = anchor.offsetTop - 100
				document.documentElement.scrollTop = anchor.offsetTop - 100
				this.scrollTop = anchor.offsetTop - 100
			},
			οnlοad() {

				let page = 1;
				let rows = 5;
				/*第一次调用*/
				this.changeAjax(page, rows) //page是页数，rows是几条数据
			},
			onscroll() { //当页面滚动的时候
				var tt = (window).height();
				var cc = (document).height();
				var bb = (document).scrollTop();
				if (tt + bb >= cc) {

					//这里可以根据需求利用延时器以及动态图来提高用户的体验度
					this.add();
				}
			},
			add() {
				// undefined
				// p_index++;
				this.changeAjax(this.page, this.rows);
			},
			changeAjax(page, rows) {
				this.$axios.get('/dishes/page/', {
					params: {
						pageNum: page,
						rows: rows
					}
				}).then(res => {
					if (res.data.length == rows) {
						//渲染数据
					} else {
						//可以加一张动态图， 提示用户已经没有数据了；

					}
				})

			},
			onMounted() {
				this.loading = false;
			},
			onRefresh() {
				setTimeout(() => {
					this.getShopInfoList();
					Toast('刷新成功');
					this.loading.value = false;
					this.count.value++;
				}, 1000);
			},

			toDishesDetails(id,shopId) {
				console.log("dishesId=" + id+",shopId="+shopId);
				this.$router.push({
					path: '/dishesDetails',
					query: {
						'id': id,
						'shopId':shopId
					}
				})
			},
			getShopDishesList() {
				let shopId = this.$route.query.shopId;
				console.log("shopId=" + shopId);
				this.$axios.get('/dishes/list/' + shopId)
					.then(res => {
						// console.log("data=" + res)
						this.dishesArray = res.result.data;
						if (this.dishesArray[0].shop != null || this.dishesArray[0].shop != '') {
							this.shop = this.dishesArray[0].shop;
							console.log("shopName=" + this.dishesArray[1].shop.shopName)
						}

					}).catch(error => {
						console.log("error:" + error)
					})
			},
			onClickLeft() {
				history.back()
			},
		}
	}
</script>
<style scoped>
	span {
		/* 上右下左 */
		margin: 10px 0px 0px 10px;
	}

	.dishes-image {
		float: left;
		display: inline-block;
		/* width: 600px; */

	}
</style>
